<template>
  <div class="flow-row">
    <div class="flow-box">
      <div class="flow-item" :class="{ 'flow-item-active': isActive }"
           @click="!readable && open('flowNoticeSetting', node)">
        <div class="flow-node-box" :class="{ 'has-error': node.error }">
          <div class="node-name" :class="nameClass(node, 'node-tz')">
            <EditName v-model:value="node.name"/>
            <el-icon style="margin-left: 10px;">
              <Bell/>
            </el-icon>
          </div>
          <div class="node-main"><span class="hint-title">设置此节点</span></div>
          <!-- 错误提示 -->
          <i v-if="node.error" theme="filled" class="node-error el-icon-edit"></i>
          <div v-if="!readable && !node.deletable" class="close-icon">
            <el-icon @click.stop="node.deletable = true">
              <CircleClose/>
            </el-icon>
          </div>
          <!-- 删除提示 -->
          <DeleteConfirm :node="node"/>
        </div>
      </div>
      <FlowAddNode :node="node" @update:node="node = $event" :nodeType="5" :readable="readable"/>
    </div>
    <FlowNoticeDrawer ref="flowNoticeDrawer" @close="isActive = false"/>
  </div>
</template>
<script setup name="FlowNoticeNode">
import {flowMixin} from '../../../mixins/flowMixin';
import FlowAddNode from '../flowAddNode.vue';
import FlowNoticeDrawer from '../drawer/FlowNoticeDrawer.vue';
import EditName from '../../../common/EditName.vue';
import DeleteConfirm from '../../../common/DeleteConfirm.vue';

import {reactive, ref, createApp,   computed, onMounted, toRefs} from "vue";
import flowhook from '../../../mixins/flowhook';

const {uuid,nameClass,delNode} = flowhook();

const isActive = ref(false);
const flowNoticeDrawer = ref(null);


const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  readable: {
    type: Boolean,
    default: false,
  },
})


const open = (name, node, routeNode) => {
  console.log("------开始提示")
  isActive.value = true;
  flowNoticeDrawer.value.showDrawer(node, routeNode);
}


</script>
